<template>
      <div id="goodslist">
            <page-title><span slot="pageName">协议列表</span></page-title>
            <div class="btn">
                        <el-button class="addProject" type="primary" round @click="addInfo"  >添加协议</el-button>
            </div>
            <!-- 表格 -->
              <el-table
                  :data="tableData"
                  style="width: 100%"
                  border
                  stripe
                  align="center"
                  :row-class-name="tableRowClassName">
                        <el-table-column
                              prop="addtime"
                              align="center"
                              label="添加时间"
                              >
                        </el-table-column>
                        

                        <el-table-column
                              prop="title"
                              align="center"
                              label="标题">
                        </el-table-column>

                       

                        <el-table-column
                              prop="content"
                              align="center"
                              label="协议内容">
                              <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                <p v-html="scope.row.content"></p>
                                <div slot="reference" class="name-wrapper">
                                    <div class="content" size="medium">{{ scope.row.content }}</div>
                                </div>
                                </el-popover>
                            </template>
                        </el-table-column>

                        <el-table-column
                              prop="status"
                              align="center"
                              label="状态">
                              <template slot-scope="scope">
                                   <el-button :type="scope.row.status == 1 ? 'success' : 'danger' "  size="mini" style="width:100px">
                                         {{ scope.row.status ==1 ? "开启" : "隐藏" }}
                                   </el-button>
                              </template>
                        </el-table-column>
                        <el-table-column prop="cardNum" align="center" label="操作">
                              <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    type="danger"
                                    @click="editProject(scope.row)">操作</el-button>
                              </template>
                        </el-table-column>
                  </el-table>
                  
                  <!-- <li-liao :DialogData="DialogData" :FormData="FormData" @update="getProject" ></li-liao> -->
      </div>
</template>

<script>
      import PageTitle from '@/components/PageTitle'
    //   import LiLiao from '@/components/Goods/LiLiao'
      export default {
            data() {
                  return {
                        tableData: [],
                        DialogData: {
                              title: "",
                              show: false,
                              add: false
                        },
                        FormData: {
                              id: "",
                              title: "",
                              score: ""
                        },
                        allData: [],
                        type: "",
                  }
            },
            components: {
                  PageTitle,
                //   LiLiao
            },
            mounted () {
                  this.getQuesten();
            },
           
            methods: {
                  
            //      获取所有协议
                  async getQuesten() {
                        let token = localStorage.miniToken 
                        let res = await this.$axios.post("/admin/user/lookprotocol", { token } )
                        console.log(res);
                        
                        this.tableData = res.data.data
                        this.allData = res.data.data
                  },

               
                  tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                              return 'warning-row';
                        } else if (rowIndex === 3) {
                              return 'success-row';
                        }
                              return '';
                  },
                 
                  editProject( row ) {
                        this.$message.success("暂无任何操作")
                  },
                //   添加协议
                addInfo() {
                    this.$store.commit("getXieYi", {})
                    this.$router.push("/addxieyi")
                },
            },
      }
</script>

<style lang="scss" scoped>
  .el-table .warning-row {
    background: oldlace;
  }
  .content{
      width: 180px;
      overflow: hidden;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .btn {
        text-align: left;
        margin-top: 30px;
  }
  .addProject {
        float: right;
        margin: 10px 20px;
  }
    .box {
  width: 100%;
  text-align: left;
  padding-bottom: 30px;
}
.btn {
        text-align: left;
        margin-top: 30px;
  }
</style>